<template>
  <div v-loading="loading" class="app-container">
    <x-table v-model="searchData" :config="tableConfig" :data="tableData" :page="page" :load="getUserInfoByPage" />
    <userInfoForm v-if="dialogName == 'userInfoForm'" :id="propId" @refresh="getUserInfoByPage" :mode="mode"
      @close="closeDialog"></userInfoForm>
  </div>


</template>

<script>
import { getUserInfoByPage, delUserInfoById } from '@/api/userInfo'
import { getToken } from '@/utils/auth'
import userInfoForm from './form.vue'
import { importDic } from '@/utils'

export default {
  components: {
    userInfoForm
  },
  data() {
    return {
      eSDic: 'findIdStatus',
      loading: 0,
      tableData: [],
      page: {
        pageSizes: [10, 20],
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      searchData: {
        status: 88
      },
      propId: '',
      dialogName: ''
    }
  },

  computed: {
    tableConfig() {
      const _this = this
      return {
        search: true,
        reset: true,
        stripe: false,
        border: true,
        highlightCurrentRow: true,
        rowClick: node => _this.$emit('cellClick', node),
        btn: [
          { text: '新增', click: () => _this.operate('add'), icon: 'el-icon-circle-plus' }
        ],
        column: [
          { label: '用户名', name: 'username', search: true, xType: 'input' },
          { label: '用户电话', name: 'phone', search: false, xType: 'input' },
          { label: '用户邮箱', name: 'email', search: false, xType: 'input' },
          { label: '用户状态', name: 'status', search: true, xType: 'select', dic:importDic(_this.eSDic) },
        ],
        operate: [
          { text: '编辑', show: true, click: data => this.operate('edit', data) },
          { text: '查看', show: true, click: data => this.operate('detail', data) },
          { text: '删除', show: true, click: _this.del },
        ]
      }
    }
  },

  mounted() {
    this.getUserInfoByPage()
  },

  methods: {
    getUserInfoByPage() {
      this.loading++
      getUserInfoByPage(this.searchData, this.page.pageNum, this.page.pageSize, getToken()).then(res => {
        console.log("getUserInfoByPage" + res)
        this.tableData = res.result.records
        this.page.total = res.result.total
      }).catch(e => console.error(e)).finally(() => this.loading--)
    },
    operate(mode, data) {
      if (mode !== 'add') {
        this.propId = data.id
        // this.eSDic  = 'IdStatus'
      }
      this.mode = mode
      this.dialogName = 'userInfoForm'
    },
    del(data) {
      this.delConfirm().then(() => {
        this.loading++
        delUserInfoById(data.id, getToken()).then(res => {
          console.log(data.id + 'delUserInfoById' + res)
          this.$message.success(res.message)
          this.getUserInfoByPage()
        }).catch(e => console.log(e)).finally(() => this.loading--)
      }).catch(e => console.log(e))
    },
    closeDialog() {
      this.dialogName = ''
    }
  },

}
</script>
